<template>
	<v-chart
		@legendselectchanged="legendselectchanged"
		:autoresize="true"
		ref="chart"
		:options="options"
	></v-chart>
</template>

<script>
import VChart from 'vue-echarts';
// import 'echarts/lib/chart/line';
import 'echarts';
export default {
	name: 'echart1',

	components: {
		VChart
	},

	data() {
		return {
			options: {
				title: {
					x: 'left',
					align: 'right'
				},
				tooltip: {
					trigger: 'axis'
				},
				xAxis: [
					{
						type: 'category',
						data: [],
						axisLine: {
							lineStyle: {
								color: '#ccc'
							}
						}
					}
				],
				color: [
					'#D360D9',
					'#7E4FB8',
					'#FE5A22',
					'#FC882D',
					'#E6A23C',
					'#67C23A',
					'#F56C6C'
				],
				grid: {
					left: '3%',
					right: '4%',
					bottom: '6%',
					containLabel: true
				},
				legend: {
					left: 'right',
					data: [],

					selected: {
						// 课时: true,
						// 其他: true
					}
				},
				yAxis: [
					{
						type: 'value',
						splitNumber: 4,
						splitLine: {
							lineStyle: {
								type: 'dashed',
								color: '#DDD'
							}
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: '#333'
							}
						},
						nameTextStyle: {
							color: '#999'
						},
						splitArea: {
							show: false
						}
					}
				],
				series: [
					// {
					// 	name: '课时',
					// 	type: 'line',
					// 	data: new Array(6).fill(1).map(() => parseInt(Math.random() * 10000)),
					// 	lineStyle: {
					// 		normal: {
					// 			width: 3,
					// 			color: {
					// 				type: 'linear',
					// 				colorStops: [
					// 					{
					// 						offset: 0,
					// 						color: '#D360D9'
					// 					}
					// 					// {
					// 					// 	offset: 1,
					// 					// 	color: '#48D8BF'
					// 					// }
					// 				],
					// 				globalCoord: false
					// 			},
					// 			shadowColor: 'rgba(211,96,217, 0.3)',
					// 			shadowBlur: 15,
					// 			shadowOffsetY: 10
					// 		}
					// 	},
					// 	itemStyle: {
					// 		normal: {
					// 			color: '#D360D9',
					// 			borderWidth: 2,
					// 			borderColor: '#D360D9'
					// 		}
					// 	},
					// 	smooth: true
					// },
					// {
					// 	name: '其他',
					// 	type: 'line',
					// 	data: new Array(6).fill(1).map(() => parseInt(Math.random() * 10000)),
					// 	lineStyle: {
					// 		normal: {
					// 			width: 3,
					// 			color: {
					// 				type: 'linear',
					// 				colorStops: [
					// 					{
					// 						offset: 0,
					// 						color: '#7E4FB8'
					// 					}
					// 					// {
					// 					// 	offset: 1,
					// 					// 	color: '#48D8BF'
					// 					// }
					// 				],
					// 				globalCoord: false
					// 			},
					// 			shadowColor: 'rgba(126,79,184, 0.3)',
					// 			shadowBlur: 15,
					// 			shadowOffsetY: 20
					// 		}
					// 	},
					// 	itemStyle: {
					// 		normal: {
					// 			color: '#7E4FB8',
					// 			borderWidth: 2,
					// 			borderColor: '#7E4FB8'
					// 		}
					// 	},
					// 	smooth: true
					// }
					// {
					// 	name: '其他',
					// 	type: 'line',
					// 	data: new Array(6).fill(1).map(() => parseInt(Math.random() * 10000)),
					// 	smooth: true
					// },
					// 	{
					// 	name: '其他2',
					// 	type: 'line',
					// 	data: new Array(6).fill(1).map(() => parseInt(Math.random() * 10000)),
					// 	smooth: true
					// }
				],
				animationDuration: 1000
			}
		};
	},
	methods: {
		refresh(obj) {
			let { data, xAxis, legendSelect, lengend } = obj;

			if (Object.prototype.toString.call(data) === '[object Array]') {
				this.options.series = data;
			} else {
				this.options.series.push(data);
			}
			this.options.xAxis[0].data = xAxis;
			this.options.legend.data = lengend;
			this.options.legend.selected = legendSelect;
		},
		showLoading() {
			this.$refs['chart'].showLoading();
		},
		hideLoading() {
			this.$refs['chart'].hideLoading();
		},
		legendselectchanged() {
			if (this.$refs.chart) {
				this.$refs.chart.resize();
			}
		}
	}
};
</script>

<style lang="stylus" scoped>
.echarts {
	width: 100%;
}
</style>
